<template>
  <div>
     <!--面包屑-->
     <div style="height: 30px;width: 98%;background-color: white;padding-top: 13px;padding-left: 2%;">
       <i class="el-icon-s-home lf" style="font-size: 18px;margin-right: 10px;"></i>
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item >首页</el-breadcrumb-item>
         <el-breadcrumb-item >物品配置管理</el-breadcrumb-item>
         <el-breadcrumb-item >类别</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
     <!--选择区域-->
     <div style="padding: 20px;">
       <i class="el-icon-search lf" style="font-size: 22px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 12px;"></i>
       <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #E4E4E4;width: 98%;height: 40px;padding-top: 8px;padding-left: 1.85%;">
         <span style="font-size: 20px;font-weight: 500;color: black;">模糊查询</span>
           <span style="margin-left:45%;">类别名称</span>
           <el-input
             style="width: 280px;margin-top: -8px;"
             placeholder="请输入类别名称"
             v-model="catName"
             clearable>
           </el-input>
         <el-button @click="loadAllCat" size="medium" style="border-radius: 0%;background-color: #666666;margin-left: 5%;" type="info">查询</el-button>
       </div>
     </div>
     <!--数据区域-->
     <div style="padding: 20px;padding-top: 0px;">
       <i class="el-icon-s-grid lf" style="font-size: 22px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 12px;"></i>
       <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #E4E4E4;width: 98%;height: 40px;padding-top: 8px;padding-left: 1.85%;">
         <span style="font-size: 20px;font-weight: 500;color: black;">数据列表</span>
         <el-button size="small" @click="updateCatWindow" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 1%;"
         type="info">修改</el-button>
         <el-button size="small" @click="addCatWindow" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 1%;"
         type="info">新增</el-button>
       </div>
       <div>
         <el-table
           :data="page.records"
           :row-style="{height:'46px'}"
           @selection-change="select"
           border
           :header-cell-style="tableHeader"
           :cell-style="{borderColor:'#CCCCCC',margin:'0',padding:'0'}"
           style="width: 100%;font-size: 18px;border: #CCCCCC solid 1px;">
           <el-table-column
             align="center"
             type="selection"
             width="80">
           </el-table-column>
           <el-table-column
             align="center"
             prop="sortNo"
             label="编号"
             width="180px">
           </el-table-column>
           <el-table-column
             align="center"
             prop="catName"
             label="类别名称"
             width="200px">
           </el-table-column>
           <el-table-column
             align="center"
             prop="upCatNAme"
             label="上级类别">
           </el-table-column>
           <el-table-column
             align="center"
             prop="catDesc"
             label="类别描述">
           </el-table-column>
           <el-table-column
             align="center"
             label="是否显示"
             width="160px">
             <template slot-scope="scope">
               {{scope.row.isShow==0?"不显示":"显示"}}
             </template>
           </el-table-column>
         </el-table>
       </div>
         <!--分页-->
       <div style="background-color: #D7D7D7;height: 98px;width: 100%;">
         <el-pagination
         class="rf"
         style="margin-right: 2%;margin-top: 40px;"
           @current-change="handleCurrentChange"
           :current-page.sync="page.current"
           :page-size="13"
           layout="prev, pager, next, jumper"
           :total="page.total">
         </el-pagination>
       </div>
     </div>

 <el-dialog
     title="新增类别"
     :visible.sync="dialogVisible1"
     width="60%"
     >
     <div style="padding-top: 60px;width: 99.8%;min-height: 600px;font-size: 20px;height: 100%;border: #d7d7d7 1px solid;background-color: #F2F2F2;">
       <div>
         <span style="margin-left:10%;">类别名称 </span>
         <el-input
           style="margin-left: 15px;width: 350px;margin-bottom: 40px;"
           placeholder="请输入名称"
           v-model="cat.catName"
           clearable>
         </el-input>
       </div>
       <div>
         <span style="margin-left:10%;">类别</span>
         <el-select v-model="cat.upCatId" placeholder="请选择">
             <el-option :key="noParent" :value="noParent" label="一级类别">一级类别</el-option>
              <el-option
                 v-for="item in one"
                 :key="item.catId"
                 :label="item.catName"
                 :value="item.catId">
               </el-option>
           </el-select>
       </div>
       <div>
         <span style="margin-left:10%;">单位</span>
         <el-input
           style="margin-left: 15px;width: 350px;margin-bottom: 40px;"
           placeholder="请输入类别单位"
           v-model="cat.unit"
           clearable>
         </el-input>
       </div>
       <div>
         <span style="margin-left:10%;">类别描述 </span>
         <el-input
         type="textarea"
         rows="3"
          style="margin-left: 15px;width: 350px;"
           v-model="cat.catDesc"
           clearable>
         </el-input>
       </div>

       <div v-if="cat.upCatId!=0">
         <span style="margin-left:10%;">绑定属性组</span>
         <el-select multiple v-model="cat.groupIds" placeholder="请选择属性组">
              <el-option
                 v-for="item in group"
                 :key="item.groupId"
                 :label="item.groupName"
                 :value="item.groupId">
               </el-option>
           </el-select>
       </div>
       <div style="margin-top: 40px;">
        <span style="margin-left:10%;">鉴定图定义 </span>
          <el-form ref="form" v-model="form" label-width="80px">
            <el-form-item
              v-for="(item, index) in form.inputs"
              :key="index"
            >
              <el-input v-model="item.pictureName" style="margin-left: 150px;width: 150px;" ></el-input>
              <el-select v-model="item.isChoice" placeholder="请选择">
                  <el-option
                    v-for="item in list"
                    :key="item.isChoice"
                    :label="item.value"
                    :value="item.isChoice">
                  </el-option>
                </el-select>
              <el-button  type="text" @click="removeInput(index)">删除</el-button>
            </el-form-item>
            <el-button type="text"style="margin-left: 250px;"  @click="addInput">新增</el-button>
          </el-form>
       </div>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="addCat">确 定</el-button>
     </span>
   </el-dialog>


   <el-dialog
       title="修改类别"
       :visible.sync="dialogVisible2"
       width="60%"
       >
       <div style="padding-top: 60px;width: 99.8%;min-height: 600px;font-size: 20px;height: 100%;border: #d7d7d7 1px solid;background-color: #F2F2F2;">
         <div>
           <span style="margin-left:10%;">类别名称 </span>
           <el-input
             style="margin-left: 15px;width: 350px;margin-bottom: 40px;"
             placeholder="请输入名称"
             v-model="updateCat.catName"
             clearable>
           </el-input>
         </div>
         <div>
           <span style="margin-left:10%;">单位</span>
           <el-input
             style="margin-left: 15px;width: 350px;margin-bottom: 40px;"
             placeholder="请输入类别单位"
             v-model="updateCat.unit"
             clearable>
           </el-input>
         </div>
         <div v-if="updateCat.upCatId!=0">
           <span style="margin-left:10%;">绑定属性组</span>
           <el-select multiple v-model="updateCat.groupIds" placeholder="请选择属性组">
                <el-option
                   v-for="item in group"
                   :key="item.groupId"
                   :label="item.groupName"
                   :value="item.groupId">
                 </el-option>
             </el-select>
         </div>
         <div>
           <span style="margin-left:10%;">类别描述 </span>
           <el-input
           type="textarea"
           rows="3"
            style="margin-left: 15px;width: 350px;"
             v-model="updateCat.catDesc"
             clearable>
           </el-input>
         </div>
         <div style="margin-top: 40px;">
          <span style="margin-left:10%;">鉴定图定义 </span>
            <el-form ref="form"  label-width="80px">
              <el-form-item
                v-for="(item, index) in updateCat.picture"
                :key="index"
              >
                <el-input v-model="item.pictureName" style="margin-left: 150px;width: 150px;" ></el-input>
                <el-select v-model="item.isChoice" placeholder="请选择">
                    <el-option
                      v-for="item in list"
                      :key="item.isChoice"
                      :label="item.value"
                      :value="item.isChoice">
                    </el-option>
                  </el-select>
                <el-button  type="text" @click="removeUpdateInput(index)">删除</el-button>
              </el-form-item>
              <el-button type="text"style="margin-left: 250px;"  @click="addUpdateInput()">新增</el-button>
            </el-form>
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="updateCats">确 定</el-button>
       </span>
     </el-dialog>
   </div>
</template>

<script>
  export default{
    name:"PrimaryClass",
    data(){
      return{
      pageNum:1,
      pageSize:10,
      catName:"",
      page:{
      },
      cat:{
        forms:[],
        upCatId:0
      },
      noParent:0,
      one:[],
      group:{},
      updateCat:{
        picture:[]
      },

      dialogVisible1:false,
      dialogVisible2:false,
      form: {
      inputs: [
        { pictureName: '' ,isChoice:0} // 初始输入框
        ]
       },
       list:[{isChoice:0,value:"可选"},{isChoice:1,value:"必选"}]
      }
    },
    methods:{

      /**
       * 表格表头样式
       */
      tableHeader({ row, column, rowIndex, columnIndex }){
        if (rowIndex === 0) {
          return 'display: table-cell;background-color: #D7D7D7;color:#333333;font-size:18px;font-weight: 500;height: 40px;margin-top: 85px;border-color:#CCCCCC;'
        }
      },
      updateCatWindow(){
        if(this.selection.length>1){
          this.$message({
            message: "一次只能选择一个属性组进行修改",
            showClose: true,
            type: 'error'
          });
          return;
        }else if(this.selection.length<1){
          this.$message({
            message: "请选择一个属性组进行修改",
            showClose: true,
            type: 'error'
          });
          return;
        }else{
          let j = JSON.stringify(this.selection[0]);
          this.updateCat=JSON.parse(j)
          this.dialogVisible2=true
        }
      },
      select(selection){
        this.selection = selection
      },
      updateCats(){
        this.updateCat.forms=this.updateCat.picture
        console.log(this.updateCat)
        this.$http.post("/goods/goodsCat/updateGoodsCat",this.updateCat).then(resp=>{
          if(resp.data.code==200){
          this.$message({
                      message: '修改类别成功',
                      type: 'success'
                    });
          }else{
             this.$message.error(resp.data.message);
          }
          this.dialogVisible2=false
          window.location.reload();
          this.updateCat={picture:[]}
        })
      },
      addCat(){
      this.cat.forms=this.form.inputs
      this.$http.post("/goods/goodsCat/addGoodsCat",this.cat).then(resp=>{
        if(resp.data.code==200){
        this.$message({
                    message: '添加类别成功',
                    type: 'success'
                  });
        }else{
           this.$message.error(resp.data.message);
        }
        this.dialogVisible1=false
        // this.loadAllCat()
        // this.findAllCat()
        // this.findGroupPage()
        // this.form=[{ pictureName: '' ,isChoice:"请选择"} ]
        window.location.reload();
      })
      },
    addInput() {
    this.form.inputs.push({pictureName: '',isChoice:0});
    },
    addUpdateInput(){
      this.updateCat.picture.push({pictureName: '',isChoice:0});
    },
    removeInput(index) {
    this.form.inputs.splice(index, 1);
    },
    removeUpdateInput(index){
     this.updateCat.picture.splice(index, 1);
    },
      addCatWindow(){
       this.dialogVisible1=true
       this.cat={}
       this.cat.upCatId=0
      },
      findAllCat(){
        this.$http.get("/goods/goodsCat/findAllCat").then(resp=>{
          let up =resp.data.data
          for (var i = 0; i < up.length; i++) {
            let l = up[i]
            if(l.upCatId==0){
              this.one.push(l)
            }
          }
        })
      },
      loadAllCat(){
        this.$http.get("/goods/goodsCat/pageAllCat",{
          params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          catName:this.catName,
          }
        }).then(resp=>{
          this.page=resp.data.data
          let record = this.page.records
          for (var i = 0; i < record.length; i++) {
            let r = record[i]
            r.groupIds = []
            for (var j = 0; j < r.groupTypeDtos.length; j++) {
              let g = r.groupTypeDtos[j]
              r.groupIds.push(g.groupId)
            }
            if(r.upCatId==0){
              r.upCatNAme = '一级类别'
            }else{
              for (var m = 0; m < record.length; m++) {
                let up = record[m]
                if(r.upCatId == up.catId){
                  r.upCatNAme = up.catName
                }
              }
            }
          }
          console.log(record)
          this.page.records = record
        })
      },
      findGroupPage(){
        let groupFind = {}
        groupFind.pageNum = 1
        groupFind.pageSize = -1
        this.$http.post("/goods/attributeGroup/findGroupPage",groupFind).then(resp=>{
          this.group=resp.data.data.records
          console.log(this.group)
        })
      },
    handleCurrentChange(val){
      this.findBrandsForm.pageNum=val
      this.loadAllBrands()
    },
    },
    created(){
      this.loadAllCat()
      this.findAllCat()
      this.findGroupPage()
    }
  }
</script>

<style>
</style>
